<template>
	<div class="home">
		<el-container>
			<el-aside width="200px">
				<el-menu default-active="1" class="el-menu-vertical-demo" :default-openeds="['1']">
					<el-submenu index="1">
						<template slot="title"><i class="el-icon-user"></i>用户管理</template>
						<el-menu-item index="1-1" >
							<!--name传递组件名字  params传递参数， 需要对象： v-bind -->
							<router-link :to="{name:'profile' ,params:{id:1}}">个人信息</router-link>
						</el-menu-item>
						<el-menu-item index="1-2" >
							<router-link to="/user/list">用户列表</router-link>
						</el-menu-item>
						<el-menu-item index="1-3" >
							<router-link to="/goHome">回到首页</router-link>
						</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title"><i class="el-icon-folder"></i>内容管理</template>
						<el-menu-item index="2-1" >分类管理</el-menu-item>
						<el-menu-item index="2-2" >内容列表</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			
			<el-container>
				<el-header>
					<el-dropdown class="header-dropdown" trigger="click">
            <span class="el-dropdown-link" style="color: #fff; cursor: pointer;">
              <i class="el-icon-setting"></i>
              <span style="margin-left: 5px;">{{name}}</span>
            </span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item >个人信息</el-dropdown-item>
							<el-dropdown-item >退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					
				</el-header>
				<el-main>
					<router-view/>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
export default {
	props:['name'],
	name: "Main",
}
</script>

<style scoped lang="scss">
//.el-header {
//	background-color: deepskyblue;
//	display: flex;
//	justify-content: space-between;
//	align-items: center;
//}
.el-header {
	background-color: deepskyblue;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0 20px;
}

.header-dropdown {
	color: #e79b04;
	cursor: pointer;
	font-size: 20px;
}

.el-dropdown-menu {
	background-color: #c80f0f;
	color: #093d6a;
}

.el-dropdown-menu__item {
	color: #074281;
}

.el-dropdown-menu__item:hover {
	background-color: #7a0505;
}

.el-aside {
	background-color: #043468;
	color: #8f0707;
}

.el-menu {
	border-right: none;
}

.el-menu-item {
	color: #950505;
}

.el-menu-item:hover {
	background-color: #06468f;
}

.el-menu-item.is-active {
	background-color: #0c498c;
}

.el-main {
	background-color: #fffdfd;
	color: #0c4a98;
	padding: 20px;
}
</style>
